
<template>
  <div class="graph" id="graph">

  </div>
</template>
<script>
export default {
  name:'graph',
  data(){
    return{
      option:{
        // 图的标题
        // title: {
        //     text: 'ECharts 关系图'
        // },
        // 提示框的配置
        // tooltip: {
        //     formatter: function (x) {
        //         return x.data.des;
        //     }
        // },
        color:['#0576ff','#47bc15','#ff7f00'],

        legend: [{
            // selectedMode: 'single',
            data: ['1','2','3']
        }],
        series: [{
            type: 'graph', // 类型:关系图
            layout: 'force', //图的布局，类型为力导图
            symbolSize: 40, // 调整节点的大小
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            edgeSymbol: ['circle', 'arrow'],
            edgeSymbolSize: [2, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 20
                    }
                }
            },
            force: {
                repulsion: 2500,
                edgeLength: [10, 50]
            },
            draggable: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#4b565b',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    formatter: function (x) {
                        return x.data.name;
                    }
                }
            },
            label: {
                normal: {
                    show: true,
                    textStyle: {}
                }
            },

            // 数据
            data: [{
                name: '周国庆',
                des: 'nodedes01',
                symbolSize: 100,
                category: 0,
            }, {
                name: '刘贵',
                des: 'nodedes02',
                symbolSize: 50,
                category: 0,
            }, {
                name: '张淑芳',
                des: 'nodedes3',
                symbolSize: 50,
                category: 0,
            }, {
                name: '三期3-1002',
                des: 'nodedes04',
                symbolSize: 70,
                category: 1,
            }, {
                name: '苏B-12YT5',
                des: 'nodedes05',
                symbolSize: 70,
                category: 2,
            }],
            links: [{
                source: '周国庆',
                target: '刘贵',
                name: '子女',
                des: '子女'
            }, {
                source: '周国庆',
                target: '张淑芳',
                name: '配偶',
                des: '配偶'
            }, {
                source: '周国庆',
                target: '三期3-1002',
                name: '房产',
                des: 'link03des'
            }, {
                source: '周国庆',
                target: '苏B-12YT5',
                name: '车辆',
                des: 'link05des'
            }],
            categories: ['1','2','3'],
        }]

      }
    }
  },
  mounted() {
    this.drawCharts()
  },
  methods: {
    drawCharts(){
      var myChart = this.$echarts.init(document.getElementById('graph'));
      myChart.setOption(this.option);
    }
  },
}
</script>
<style lang="scss" scoped>
.graph{
  width: 800px;
  height: 100%;
}
</style>
